<!--记实学分公开-->
<template>
  <div id="pubDocumentary">
    <div class="row">
      <div class="col-lg-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="h3">学生记实项目明细</h3>
          </div>
          <div class="panel-body">
            <div class="table-responsive">
              <table class="table table-striped table-bordered table-hover" id="dataTables">
                <thead>
                <tr>
                  <th class="text-center">学号</th>
                  <th class="text-center">项目</th>
                  <th class="text-center">提交分数</th>
                  <th class="text-center">日期</th>
                  <th class="text-center">是否同意</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for='(record,index) in records' v-show = "record.agree == 1">
                  <td>{{record.studentNumber}}</td>
                  <td
                    data-container="body"
                    data-toggle="popover"
                    data-placement="top"
                    :data-content="projects[record.projectNumber-1].myContent">
                    {{record.projectNumber}}
                  </td>
                  <td>{{record.score}}</td>
                  <td class="center">{{record.date}}</td>
                  <td>
                    <p class="" >已同意</p>
                    <!--<p v-show = "record.agree == 0">未审核</p>-->
                    <!--<p class="" v-show="record.agree == -1">未同意</p>-->
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>


<script>
  import '../assets/js/jquery.dataTables'
  import '../assets/js/dataTables.bootstrap'
  import '../../node_modules/bootstrap/dist/js/bootstrap.min'
  import '../../node_modules/bootstrap/dist/js/bootstrap'
  import {formatDate} from '../config/date'
  import API from '../config/request';

  export default {
    name : 'pubDocumentary',
    data () {
      return {
        url: API.URL,
        records: [],
        projects:[]
      }
    },
    created() {
      this.getProject()
      this.getDocumentary()
    },
    methods : {
      getProject: function () {
        this.$http.get(this.url+'doc').then(function (response) {
          for(let i in response.body){
            //console.log(response.body[i].content.split('——')[0])
            response.body[i].myContent = response.body[i].content.split('——')[0].trim()
          }
          this.projects = response.body
        })
      },
      transfrom: function (value) {
        if(!value){
          return ''
        }else{
          let date = new Date(value);
          let Y = date.getFullYear() + '-';
          let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
          let D = date.getDate() + ' ';
          return Y+M+D
        }
      },
      getDocumentary : function () {
        this.$http.get(this.url + 'documentary/getDocument').then(function (response) {
          for(let i in response.body){
            response.body[i].date = this.transfrom(response.body[i].date)
          }
          this.records = response.body
        })
      }
    },
    mounted(){
      setTimeout(function () {
        $('#dataTables').DataTable({})
        $('[data-toggle="popover"]').popover()
      }, 500)
    },
    /*
     *
     * 以后可能会出现bug ，设置监听
     *
     * */
    filters: {
      formatDate(data){
        return formatDate(data, 'yyyy-MM-dd')
      }
    }
  }

</script>

<style scoped>
  @import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
  @import "../assets/font-awesome-4.1.0/css/font-awesome.min.css";
  table.dataTable thead .sorting_asc:after {
    content: "\f0de";
    float: right;
    font-family: fontawesome;
  }

  table.dataTable thead .sorting_desc:after {
    content: "\f0dd";
    float: right;
    font-family: fontawesome;
  }

  table.dataTable thead .sorting:after {
    content: "\f0dc";
    float: right;
    font-family: fontawesome;
    color: rgba(50,50,50,.5);
  }
  table{
    width:550px;
  }
  @media screen and (min-width: 768px){
    table{
      width: 100%;
    }
  }
</style>
